<template>
  <div class="app">
    <top-header></top-header>
    <top-nav></top-nav>
    <div class="line"></div>
    <el-row class="nav">
      <el-col :span="4">
        <el-menu class="el-menu-vertical-demo" :default-active="activeName" @select="handleSelect" @open="handleOpen" @close="handleClose">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <template v-for="(item, index) in allTabs">
                <el-menu-item :index="item.name">{{item.title}}</el-menu-item>
              </template>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>导航二</el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-setting"></i>导航三</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-tabs v-model="activeName" type="card" closable @tab-click="handleClick" @tab-remove="handleRemove">
          <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
            <tab-componet :is="item.content"></tab-componet>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Row, Col, Menu, Submenu, MenuItem, MenuItemGroup, Tabs, TabPane } from 'element-ui';
import User from '@/components/User';
import Role from '@/components/Role';
import Hello from '@/components/Hello';
import Home from '@/components/Home';
import TopHeader from '@/components/TopHeader';
import TopNav from '@/components/TopNav';

export default {
  components: {
    ElRow: Row,
    ElCol: Col,
    ElMenu: Menu,
    ElSubmenu: Submenu,
    ElMenuItem: MenuItem,
    ElMenuItemGroup: MenuItemGroup,
    ElTabs: Tabs,
    ElTabPane: TabPane,
    User,
    Role,
    Hello,
    Home,
    TopHeader,
    TopNav,
  },
  data() {
    return {
      allTabs: [
        {
          title: '主页',
          name: 'home',
          content: 'Home',
        }, {
          title: '欢迎',
          name: 'hello',
          content: 'Hello',
        }, {
          title: '用户管理',
          name: 'user',
          content: 'User',
        }, {
          title: '角色管理',
          name: 'role',
          content: 'Role',
        },
      ],
      activeName: '',
      editableTabs: [],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      const tabs = this.editableTabs;
      let hasCurrentTab = false;

      if (tabs.length > 0) {
        tabs.forEach((tab) => {
          if (tab.name === key) {
            this.activeName = key;
            hasCurrentTab = true;
          }
        });
      }

      if (!hasCurrentTab) {
        const newTab = this.allTabs.filter(tab => tab.name === key);
        if (newTab.length > 0) {
          this.editableTabs.push(newTab[0]);
          this.activeName = key;
        }
      }
    },
    handleRemove(targetName) {
      const tabs = this.editableTabs;
      let activeName = this.activeName;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      if (this.editableTabs.length === 0) {
        this.activeName = '';
      } else {
        this.activeName = activeName;
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style>
html,
body {
  font-family: Helvetica, sans-serif;
  border: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.app {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}

.header {
  background-color: #324057;
  color: #c0ccda;
}

.logo {
  height: 80px;
  line-height: 78px;
  background-color: #fbfdff;
  color: #e9e9e9;
}

.line {
  height: 2px;
  background-color: #e0e6ed;
}
</style>

